{% extends "projects/base_project.html" %}

{% load i18n %}
{% load privacy_tags %}
{% load static %}

{% block title %}{{ build.project.name }}{% endblock %}

{% block extra_scripts %}
  <script type="text/javascript" src="{% static 'vendor/knockout.js' %}"></script>
  <script type="text/javascript" src="{% static 'builds/js/detail.js' %}"></script>
  <script type="text/javascript">
var detail_views = require('builds/detail');
$(document).ready(function () {
    var view = detail_views.BuildDetailView.init({id: '{{ build.pk }}'});
});
  </script>
{% endblock %}

{% block extra_links %}
  <link rel="stylesheet" href="{% static 'builds/css/detail.css' %}" />
{% endblock %}

{% block project_editing %}
  {% with builds_active="active" %}
    {% include "core/project_bar.html" %}
  {% endwith %}
{% endblock %}

{% block content %}
  <div class="build build-detail" id="build-detail">

    <!-- Build meta data -->
    <ul class="build-meta">
      <div data-bind="visible: finished()">
        <li>
          {% trans "Completed" %}
          <span>{{ build.date|date:"N j, Y. P" }}</span>
        </li>

        <li>
          {% trans "Build took" %}
          <span data-bind="text: length">
            {{ build.length }}
          </span>
          {% trans "seconds" %}
        </li>
      </div>

      {% if build.builder and request.user.is_staff %}
        <li>
          {% trans "Built on" %}
          {{ build.builder }}
        </li>
      {% endif %}

      <div data-bind="visible: finished() && success() && docs_url">
        <li>
          <a data-bind="attr: {href: docs_url}">
            {% trans "View docs" %}
          </a>
        </li>
      </div>

      <div data-bind="visible: finished()">
        <li>
          <a href="{% url "build-detail" build.pk "txt" %}">
            {% trans "View raw" %}
          </a>
        </li>
      </div>


      {# Show rebuild button only if the version is external and it's the latest build for this version #}
      {# see https://github.com/readthedocs/readthedocs.org/pull/6995#issuecomment-852918969 #}
      {% if request.user|is_admin:project and build.version.type == "external" and is_latest_build %}
      <div data-bind="visible: finished()">
        <form method="post" name="rebuild_commit" action="{% url "builds_project_list" project.slug %}">
          {% csrf_token %}
            <a href="#" onclick="document.forms['rebuild_commit'].submit();">
              Rebuild this build
            </a>
            <input type="hidden" name="version_slug" value="{{ build.version.slug }}">
            <input type="hidden" name="build_pk" value="{{ build.pk }}">
        </form>
      </div>
      {% endif %}

    </ul>

    <div class="build-id">
      {% blocktrans trimmed with build_id=build.pk %}
        Build #{{ build_id }}
      {% endblocktrans %}
    </div>

    <div class="build-version">
      <span class="build-version-slug">
        {% if request.user|is_admin:project and not build.is_external and build.version %}
          <a href="{% url "project_version_detail" build.version.project.slug build.version.slug %}">{{ build.version.slug }}</a>
        {% elif build.is_external %}
          {% blocktrans with build.external_version_name as external_version_name %}
            <b>{{ external_version_name }}</b>
          {% endblocktrans %}
            #<a href="{{ build.vcs_url }}">{{ build.get_version_name }}</a>
        {% else %}
          {{ build.get_version_slug }}
        {% endif %}
      </span>
      <span class="build-commit" data-bind="visible: commit">
        {% if build.get_commit_url %}
          (<a data-bind="attr: {href: commit_url}"><span data-bind="text: commit">{{ build.commit }}</span></a>)
        {% else %}
            (<span data-bind="text: commit">{{ build.commit }}</span>)
        {% endif %}
      </span>
    </div>

    <div class="build-state">
      <span>
        <span data-bind="visible: !finished(), text: state_display"
              style="display: none;">
          {{ build.get_state_display }}
        </span>
        <img src="{% static 'core/img/loader.gif' %}"
            data-bind="visible: !finished()"
            style="display: none;" />
      </span>
      <span class="build-state-successful"
            data-bind="visible: finished() && success()"
            style="display: none;">
        {% trans "Build completed" %}
      </span>
      <span class="build-state-failed"
            data-bind="visible: finished() && !success()"
            style="display: none;">
        {% trans "Build failed" %}
      </span>
    </div>

    {% if request.user|is_admin:project %}
      {% if not build.success and build.commands.count < 4 and build.version and build.version.supports_wipe %}
        <div class="build-ideas">
          <p>
            {% url 'wipe_version' build.project.slug build.version.slug as wipe_url %}
            {% blocktrans trimmed %}
              Having trouble with your build environment?
              Try <a href="{{ wipe_url }}">resetting it</a>.
            {% endblocktrans %}
          </p>
        </div>
      {% elif not build.success and "setup.py install" in build.commands.last.output %}
        <div class="build-ideas">
          <p>
            {% url 'projects_advanced' build.project.slug as advanced_url %}
            {% blocktrans trimmed %}
              Don't want <em>setup.py install</em> called?
              Change the <strong>Install Project</strong> setting in your <a href="{{ advanced_url }}">advanced settings</a>.
            {% endblocktrans %}
          </p>
        </div>
      {% endif %}
      {% if build.finished and not build.using_latest_config %}
        <div class="build-ideas">
          <p>
            {% blocktrans trimmed with config_file_link="https://docs.readthedocs.io/page/config-file/v2.html" %}
              <strong>Configure your documentation builds!</strong>
              Adding a <a href="{{ config_file_link }}">.readthedocs.yaml</a> file to your project
              is the recommended way to configure your documentation builds.
              You can declare dependencies, set up submodules, and many other great features.
            {% endblocktrans %}
          </p>
        </div>
      {% endif %}
    {% endif %}

    {% if build.output %}
      {# If we have build output, this is an old build #}
      <p>
        <button data-bind="visible: !legacy_output(), click: show_legacy_output">
          {% trans "Show full build output" %}
        </button>
      </p>

      <div data-bind="visible: legacy_output"
           style="display: none;">
        <h3>{% trans "Build Output" %}</h3>
        <pre class="build-output"><span id="build-output">{{ build.output }}</span></pre>

        {% if build.setup %}
          <h3>{% trans "Setup Output" %}</h3>
          <pre class="build-output"><span id="build-setup">{{ build.setup }}</span></pre>
        {% endif %}

        {% if build.setup_error %}
          <h3>{% trans "Environment Standard Error" %}</h3>
          <pre class="build-error"><span id="build-setup_error">{{ build.setup_error }}</span></pre>
        {% endif %}
      </div>

      {% if build.error %}
        <h3>{% trans "Build Errors" %}</h3>
        <pre class="build-error"><span id="build-error">{{ build.error }}</span></pre>
      {% endif %}

    {% else %}
      {# Show new command output if lacking build.output #}

      <div class="build-error"
           data-bind="visible: error"
           style="display: none;">
        <h3>{% trans "Error" %}</h3>
        <p class="build-error"
           data-bind="text: error">
          {{ build.error }}
        </p>
        <p>
          {% block github_issue_link %}
            {% if issue_url %}
              {% blocktrans trimmed with url=issue_url %}
                <a href="{{ url }}">Report any build issues here</a>.
              {% endblocktrans %}
            {% endif %}
          {% endblock %}
        </p>
      </div>

      <div id="build-commands"
           class="build-command-list"
           data-bind="visible: commands, foreach: display_commands"
           style="display: none;">
        <div class="build-command"
             data-bind="css: command_status">
          <div class="build-command-run" data-bind="click: toggleCommand">
            <span data-bind="text: command"></span>
          </div>
          <div class="build-command-return"
               data-bind="visible: is_showing">
            <div class="build-command-output">
              <span data-bind="text: output"></span>
            </div>

            <div class="build-command-meta">
              <span class="build-command-time">
                {% trans "Command time:" %}
                <span data-bind="text: run_time">0</span>s
              </span>

              <span class="build-command-exit-code">
                {% trans "Return" %}:
                <span data-bind="text: exit_code"></span>
              </span>
            </div>

          </div>
        </div>
      </div>
    {% endif %}

  </div>
{% endblock %}
